<!-- 商品信息编辑 -->
 <template>
    <div>
        <Title title="商品编辑">
        </Title>
        <el-form class="goods-form">
            <el-form-item label="商品名称">
                <el-input size="large" v-model="goods.name"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
               <el-select v-model="goods.category" size="large" style="width: 180px;">
                  <el-option v-for="(item,index) in categorys" :key="index" :lable="item.cateName" :value="item.cateName">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input-number v-model="goods.price" :min="1"  size="large"/>
            </el-form-item>
            <el-form-item label="商品图片">
                <el-upload
                    class="avatar-uploader"
                    :action="'/poo'+'/goods/goods_img_upload'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imgUrl" :src="baseUrl+imgUrl" class="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input size="large" type="textarea" v-model="goods.goodsDesc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="large" type="primary" class="btn" @click="updateBtn">立即修改</el-button>
            </el-form-item>
        </el-form>
    </div>
 </template>
 
 <script setup>
import Title from '@/views/home/component/Title.vue';
import { useRoute,useRouter } from 'vue-router';
import {ref} from 'vue';
import { ElMessage } from 'element-plus';
import {getGoodsType,updateGoods} from '@/api/goods.js';
// 引入公共配置 服务器地址
import { baseUrl } from "@/utile/commen.js"

const route = useRoute();
const router = useRouter();
 //获取路由参数 商品信息
 const goods = ref(route.query);
 //商品分类
 const categorys = ref([]);
 const imgUrl = ref(goods.value.imgUrl);
 //获得全部分类信息
 const getCategorys = async()=>{
   const res = await getGoodsType();
   categorys.value = res.categories;
 }
 getCategorys();

 //修改商品
 const updateBtn = async()=>{
  //处理图片接口
  const index = imgUrl.value.lastIndexOf('/');
  goods.value.imgUrl = imgUrl.value.slice(index+1);
  // console.log(goods.value);
   //调用接口
   const {code,msg} = await updateGoods(goods.value);
   if(code == 0){
     ElMessage.success(msg);
     //跳转到商品列表
     router.push('/goodsList');
   }else{
     ElMessage.error(msg);
   }
 }

 const handleAvatarSuccess = (res, file) => {
  imgUrl.value = res.imgUrl;
    // console.log(res,file);
 }
 </script>
 
 <style  scoped>
   .img{
      width: 178px;
      height: 178px;
   }
   .goods-form{
      margin-top: 20px;
      margin-left: 12px;
   }
   .btn{
      margin-left: 68px;
   }
 </style>